<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>无标题文档</title>


<style scoped>
	/* input{border: 1px solid #ccc: padding: 5px 0px; border-radius: 3px; padding-left:5px; }
	*{color: #848482:}*/
 

</style>


<script src="/js/vue.min.js"></script>

<link href="/css/base.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="/js/axios.min.js"></script>

<script src="/ckeditor/ckeditor.js"></script>
           
</head>

<body >
  <div id="dongwuDiv">
	       <table width="98%" align="center" border="0" cellpadding="4" cellspacing="1" bgcolor="#F5F5F5" style="margin-bottom:8px">
						<tr bgcolor="#FFFFFF" style="height: 38px;">
							<td width="103" bgcolor="#FFFFFF" align="right">
								类别：
							</td>
							<td bgcolor="#FFFFFF" align="left">
								<select class="select" v-model="dongwu.leibieId">
									<option value="0">--请选择类别--</option>
									<option v-for="(leibie, index) in leibieList" :key="leibie.id" :value="leibie.id">{{leibie.mingcheng}}</option>
								</select>
							</td>
						</tr>			
						<tr bgcolor="#FFFFFF" style="height: 38px;">
						    <td width="123" bgcolor="#FFFFFF" align="right">
						        名称：
						    </td>
						    <td bgcolor="#FFFFFF" align="left">
						        <input type="text" v-model.trim="dongwu.mingcheng" size="55"/>
						    </td>
						</tr>
						<tr bgcolor="#FFFFFF" style="height: 38px;">
						    <td width="123" bgcolor="#FFFFFF" align="right">
						        简单介绍：
						    </td>
						    <td bgcolor="#FFFFFF" align="left">
						        <textarea class="ckeditor" name="jieshao"></textarea>
						    </td>
						</tr>
						<tr bgcolor="#FFFFFF" style="height: 38px;">
						    <td width="123" bgcolor="#FFFFFF" align="right">
						          图片：
						    </td>
						    <td bgcolor="#FFFFFF" align="left">
								<input type="text" size="60" readonly="readonly" v-model="dongwu.fujian"/><br/>
						        <input type="file" ref="fileRef" accept="*" @change="handleFileChange($event)"/>
								<input type="button" value="上传" style="width: 66px;" @click="upload()"/>
								<input type="hidden" size="60" readonly="readonly" v-model="dongwu.fujianYuan"/>
						    </td>
						</tr>
						<tr bgcolor="#FFFFFF" style="height: 38px;">
						    <td width="123" bgcolor="#FFFFFF" align="right">
						          备注：
						    </td>
						    <td bgcolor="#FFFFFF" align="left">
						        <input type="text" v-model="dongwu.beizhu" size="35" />
						    </td>
						</tr>
						<tr bgcolor="#FFFFFF" style="height: 38px;">
						    <td width="123" bgcolor="#FFFFFF" align="right">
						          发布时间：
						    </td>
						    <td bgcolor="#FFFFFF" align="left">
						        <input type="text" v-model="dongwu.fabushi" size="35" />
						    </td>
						</tr>
						<tr bgcolor="#FFFFFF" style="height: 38px;">
						    <td width="123" bgcolor="#FFFFFF" align="right">
						        &nbsp;
						    </td>
						    <td bgcolor="#FFFFFF" align="left">
						       <input type="button" value="提交" @click="dongwuAdd()" class="lanse" style="width: 86px;"/>&nbsp; 
						    </td>
						</tr>
					 </table>
  </div>
  


<script type="text/javascript">
	var vm = new Vue({
		
		el: '#dongwuDiv',
		data: 
		{
			dongwu:{
				id:'',
				leibieId:0,
				mingcheng:'',
				jieshao:'',

				fujian:'',fujianYuan:'',
				beizhu:'',
				fabushi:'',
				zt:'待领养',
				del:'no',
			},

			file:"",
			leibieList:[],
		},
		methods: 
		{
			dongwuAdd()
			{
				var txt = CKEDITOR.instances.jieshao.getData(); 
				this.dongwu.jieshao=txt;


				if(this.dongwu.leibieId ==0)
				{
					alert("请选择类别");return false;
				} 
				if(this.dongwu.mingcheng =="")
				{
					alert("请填写动物名称");return false;
				}
				
				this.add();
			},

			add()
			{
				axios({
						method: 'POST',
						url: '/dongwuAdd',
						data: this.dongwu,
						/* params:{
							username:this.dongwu.userName,
							password:this.dongwu.userPw,
						} */
						}).then(data => {
							if (data.data.state == 66)
							{
								alert("添加成功");
								location.href="/admin/dongwu/dongwuMana.html";
							} 
						    
							
						}).catch(error => {
							alert(error);
						})
			},

			

			handleFileChange(event) 
			{
				this.file = event.target.files[0];
			},

			upload()
			{
				/* if(this.$refs.fileRef.value=="") */
				if(this.file=="")
				{
					alert("请选择图片");
					return false;
				}

				let formFile = new FormData();
				formFile.append("file", this.file);
				
                axios({
						method: 'POST',
						url: '/upload',
						data: formFile, 
						/* params:{
							username:this.dongwu.userName,
							password:this.dongwu.userPw,
						} */
						}).then(data => {
							if (data.data.state == 66)
							{
								alert("上传成功");
								this.file='';
								var fujian=data.data.data; 
								this.dongwu.fujian=fujian.fujian;
								this.dongwu.fujianYuan=fujian.fujianYuan;
							} 
						}).catch(error => {
							alert(error);
				})


			},

			leibieAll()
			{
               axios({
						method: 'POST',
						url: '/leibieAll',
						/* data: this.laoshi, */
						/* params:{
							username:this.laoshi.userName,
							password:this.laoshi.userPw,
						} */
						}).then(data => {
							if (data.data.state == 66)
							{
								this.leibieList=data.data.data;
								//alert(this.leibieList.length);
							} 
						}).catch(error => {
							alert(error);
				})
			},

			
			/* 获取系统时间 */
			padLeftZero (str)
			{
			return ('00' + str).substr(str.length);
			},

			formateDate(date, fmt)
			{
			if (/(y+)/.test(fmt)) {
			fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
			}
			let o = {
			'M+': date.getMonth() + 1,
			'd+': date.getDate(),
			'h+': date.getHours(),
			'm+': date.getMinutes(),
			's+': date.getSeconds()
			}
			for (let k in o) {
			if (new RegExp(`(${k})`).test(fmt)) {
			let str = o[k] + '';
			fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));
			}
			}
			return fmt;
			},
			/* 获取系统时间 */


			
		},

		created()
		{
			this.leibieAll();
			this.dongwu.fabushi=this.formateDate(new Date(), 'yyyy-MM-dd hh:mm');
		}
	
	    
	})
</script>





</body>
</html>
